import './tree-item.scss'
import { Select, Menu, Dropdown, message } from 'antd'
import { DownOutlined } from '@ant-design/icons'
const { Option } = Select
// 自定义tree组件
export default function TreeItem(props) {
  // console.log(props.showModal)
  const { showModal } = props
  const { name, id, introduce, manager, pid } = props.data
  // 点击菜单选项时
  const onClick = ({ key }) => {
    message.info(`Click on item ${key}`)
    if (key === 'add' || key === 'edit') {
      // console.log(showModal)
      showModal(id)
    }
  }
  return (
    <div className="tree-item">
      <span>{name}</span>
      <span>
        <span className="admin-name">{manager}</span>
        <Dropdown
          overlay={
            <Menu onClick={onClick}>
              <Menu.Item key="add">添加子部门</Menu.Item>
              {pid !== '-1' && <Menu.Item key="edit">查看部门</Menu.Item>}
              {pid !== '-1' && <Menu.Item key="delete">删除部门</Menu.Item>}
            </Menu>
          }
        >
          <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
            操作&nbsp;
            <DownOutlined></DownOutlined>
          </a>
        </Dropdown>
      </span>
    </div>
  )
}
